<template>
  <div id="app" :class="appClass">
    <div v-if="fullLayout" class="full-layout">
      <router-view />
    </div>
    <mobile-layout v-else-if="isPhone">
      <router-view />
    </mobile-layout>
    <pc-layout v-else>
      <router-view />
    </pc-layout>

    <version-check></version-check>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
import PcLayout from '@/layouts/pc-layout'
import MobileLayout from '@/layouts/mobile-layout'
import VersionCheck from '@/components/VersionCheck'

export default {
  name: 'App',
  components: {
    PcLayout,
    MobileLayout,
    VersionCheck
  },
  computed: {
    ...mapGetters({
      isPhone: 'isPhone',
      isNight: 'nightMode'
    }),
    fullLayout() {
      return this.$route.meta.layout === 'full'
    },
    matchHeight() {
      return this.$route.meta.match === 'height' || this.$route.meta.match === 'all'
    },
    matchWidth() {
      return this.$route.meta.match === 'width' || this.$route.meta.match === 'all'
    },
    appClass() {
      return {
        'is-phone': this.isPhone,
        'is-pc': !this.isPhone,
        'is-night': this.isNight,
        'match-height': this.isPhone || this.matchHeight,
        'match-width': this.isPhone || this.matchWidth
      }
    }
  },
  created() {
    this.setIsPhone(window.innerWidth < 420)
  },
  methods: {
    ...mapMutations({
      setIsPhone: 'SET_IS_PHONE'
    })
  }
}
</script>

<style>
/* MUESUI补充样式 */
.toggle-icon {
  color: rgba(0,0,0,.54);
  -webkit-transition: -webkit-transform .3s cubic-bezier(.23,1,.32,1);
  transition: -webkit-transform .3s cubic-bezier(.23,1,.32,1);
  transition: transform .3s cubic-bezier(.23,1,.32,1);
  transition: transform .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);
}
.mu-item__open .toggle-icon {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
</style>

<style>
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
  width: 100%;
}
#app {
  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
}
#app.match-height {
  height: 100%;
  overflow: hidden;
}
#app.match-width {
  width: 100%;
  overflow: hidden;
}
</style>
